<template>
  <div id="enum_desc">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit"><i class="el-icon-edit-outline"/>枚举详情</span>
      </div>
      <div
        id="boxMain"
        @mousedown="mouseOn($event)"
        @mousemove="mouseMove($event)"
        @mouseup="mouseUp($event)"
      >

        <canvas
          id="canvas"
          ref="canvas"
          width="1500"
          height="600"
        />
        <div class="boxleft">
          <div
            ref="left"
            class="lineLeft"
          >
            <div
              v-for="(item,index) in dataArr[0]"
              :key="index"
              class="box leftBox"
            >
              {{ item.left }}
            </div>
          </div>
        </div>
        <div class="boxright">
          <el-select
            v-model="couponSelected"
            placeholder="请选择"
            @change="changes(couponSelected)"
          >
            <el-option
              v-for="items in dataSources"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            />
          </el-select>
          <div
            ref="right"
            class="lineRight"
          >
            <div
              v-for="(item,key) of keyvalues"
              :key="key"
              class="box"
            >
              {{ key }}
            </div>
          </div>
        </div>
        <div
          id="lines"
          ref="lines"
        />
      </div>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >提交</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { enumDesc, enumSave } from '@/api/page'

export default {
  data() {
    return {
      data: {},
      keyvalues: {},
      dataSources: [],
      dict: [],
      couponSelected: '',
      // 连线
      mid_startx: '',
      mid_starty: '',
      mid_endx: '',
      mid_endy: '',
      context: '',
      over: true,
      isRight: false,
      dataArr: [],
      gp: []
    }
  },
  mounted() {
    this.context = this.$refs.canvas.getContext('2d')

    this.data.id = localStorage.getItem('enumid')
    this.data.pid = localStorage.getItem('pid')

    enumDesc(this.data).then(response => {
      if (response.data.code == 'SUCCESS') {
        this.dataSources = response.data.data.dataSources
        this.dict = response.data.data.dict
        this.couponSelected = this.dict.cid
        // this.changes();
        var that = this
        setTimeout(function() {
          that.changes()
        }, 500)
      }
    })
  },
  created() {
    this.dataArr = [
      [{ left: 'name' }, { left: 'enumPackage' }, { left: 'enumViewer' }]
    ]
  },
  updated() {
    this.lins()
  },
  methods: {
    onBack() {
      this.$router.go(-1)
    },
    onSubmit() {
      var data = {}
      var keys = []
      for (var key in this.keyvalues) {
        keys.push(key)
      }
      data.pid = this.data.pid
      data.cid = this.couponSelected
      data.id = this.dict.id
      console.log(this.gp)
      for (var i = 0; i < this.gp.length; i++) {
        if (this.gp[i].key == 0) {
          data.name = keys[this.gp[i].value]
        } else if (this.gp[i].key == 1) {
          data.enumPackage = keys[this.gp[i].value]
        } else {
          data.enumViewer = keys[this.gp[i].value]
        }
      }
      enumSave(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          enumDesc(this.data).then(response => {
            if (response.data.code == 'SUCCESS') {
              this.dataSources = response.data.data.dataSources
              this.dict = response.data.data.dict
              this.couponSelected = this.dict.cid
              this.$message({
                message: '恭喜你，这是一条成功消息',
                type: 'success'
              })
              this.$router.push('/enum/index')
            }
          })
        }
      })
    },
    addkey() {
      var obj = {}
      this.keyvalue.push(obj)
    },
    changes(a) {
      if (a != this.dict.cid) {
        for (var i = 0; i < this.dataSources.length; i++) {
          if (this.dataSources[i].id == this.couponSelected) {
            this.keyvalues = JSON.parse(this.dataSources[i].keyValues)
          }
        }
        this.gp = []
        for (var i = this.$refs.lines.childNodes.length - 1; i >= 0; i--) {
          this.$refs.lines.childNodes[i].remove()
        }
      } else {
        for (var i = 0; i < this.dataSources.length; i++) {
          if (this.dataSources[i].id == this.couponSelected) {
            this.keyvalues = JSON.parse(this.dataSources[i].keyValues)
          }
        }
        this.gp = []
        for (var i = this.$refs.lines.childNodes.length - 1; i >= 0; i--) {
          this.$refs.lines.childNodes[i].remove()
        }
        // this.descLine()
      }
      this.descLine()
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },

    returns() {
      this.$router.go(-1)
    },
    // 连线
    mouseOn(event) {
      if (event.path[1].className == 'lineLeft') {
        this.over = false
        this.isRight = true
        this.mid_startx = event.target.getAttribute('left')
        this.mid_starty = event.target.getAttribute('top')
        this.mid_gpl = event.target.getAttribute('gpl')
      }

      if (event.path[1].className == 'lines') {
        // this.gp.splice(event.path[1].getAttribute("attr"), 1);
        for (var c = 0; c < this.gp.length; c++) {
          if (this.gp[c].key == event.path[1].getAttribute('id')) {
            this.gp.splice(c, 1)
          }
        }

        event.path[1].remove()
      }
      if (event.path[1].className == 'lineRight') {
        this.isRight = false
      }
    },
    mouseMove(event) {
      if (this.over == false) {
        var mid_endx = event.layerX
        var mid_endy = event.layerY - 80

        this.context.clearRect(0, 0, 1500, 600)
        this.context.beginPath()
        this.context.moveTo(this.mid_startx, this.mid_starty - 60) // 设置起点状态
        this.context.lineTo(mid_endx, mid_endy) // 设置末端状态
        this.context.lineWidth = '2' // 设置线宽状态
        this.context.strokeStyle = '#0aa4dc' // 设置线的颜色状态
        this.context.stroke()
        this.context.restore()
      }
    },
    mouseUp(event) {
      this.over = true
      if (event.path[1].className == 'lineRight' && this.isRight == true) {
        this.context.clearRect(0, 0, 1500, 600) // 整个画布清除
        this.mid_endx = event.target.getAttribute('left')
        this.mid_endy = event.target.getAttribute('top')
        this.mid_gpr = event.target.getAttribute('gpr')
        var isC = true
        var gp = {}
        gp.key = this.mid_gpl
        gp.value = this.mid_gpr
        this.gp.forEach(item => {
          if (item.key == gp.key) {
            this.gp.splice(this.mid_gpl, 1, gp)
            isC = false
          }
        })
        if (isC) {
          this.gp.push(gp)
        }
        // this.gp.splice(this.mid_gpl,1,gp);
        console.log(this.gp)
        var line1 = this.mid_endx - this.mid_startx
        var line2 = this.mid_endy - this.mid_starty
        var line3 = Math.round(
          Math.sqrt(Math.pow(line1, 2) + Math.pow(line2, 2))
        )
        var cos = line2 / line3
        var radina = Math.acos(cos)
        var angle = 90 - Math.floor(180 / (Math.PI / radina))

        var lineBox = document.createElement('div')
        var lineImg = document.createElement('span')
        lineBox.id = this.mid_gpl
        lineBox.className = 'lines'
        lineBox.style =
          'width:' +
          line3 +
          'px;height:' +
          2 +
          'px;left:' +
          this.mid_startx +
          'px; top:' +
          this.mid_starty +
          'px;transform: rotate(' +
          angle +
          'deg) '
        lineImg.className = 'del el-icon-close'
        lineBox.appendChild(lineImg)

        var mid_gpl = document.getElementsByClassName('lines')
        for (var i = 0; i < mid_gpl.length; i++) {
          if (mid_gpl[i].id == this.mid_gpl) {
            mid_gpl[i].remove()
          }
        }

        this.$refs.lines.appendChild(lineBox)

        this.mid_gpl = ''
        this.mid_gpr = ''
      } else {
        this.context.clearRect(0, 0, 1500, 600) // 整个画布清除
      }
    },
    lins() {
      for (var i = 0; i < this.$refs.left.children.length; i++) {
        var leftLeft = this.$refs.left.children[i].offsetLeft
        var leftTop = this.$refs.left.children[i].offsetTop
        var leftWidth = this.$refs.left.children[i].offsetWidth
        var leftHeight = this.$refs.left.children[i].clientHeight
        this.$refs.left.children[i].setAttribute('gpl', i)
        this.$refs.left.children[i].setAttribute('left', leftLeft + leftWidth)
        this.$refs.left.children[i].setAttribute(
          'top',
          leftTop + leftHeight / 2
        )
      }
      for (var i = 0; i < this.$refs.right.children.length; i++) {
        var rightLeft = this.$refs.right.children[i].offsetLeft
        var rightTop = this.$refs.right.children[i].offsetTop
        var rightWidth = this.$refs.right.children[i].offsetWidth
        var rightHeight = this.$refs.right.children[i].offsetHeight
        this.$refs.right.children[i].setAttribute('gpr', i)
        this.$refs.right.children[i].setAttribute('left', rightLeft)
        this.$refs.right.children[i].setAttribute(
          'top',
          rightTop + rightHeight / 2
        )
      }
      this.context.clearRect(0, 0, 1500, 600)
    },
    // this.appends(gprLeft, gplLeft, gprTop, gplTop, gplId, gprId);
    appends(a, b, c, d, e, f) {
      var gp = {}
      gp.key = e
      gp.value = f
      this.gp.splice(d, 0, gp)

      var lineOne = a - b
      var lineTwo = c - d

      var lineThree = Math.round(
        Math.sqrt(Math.pow(lineOne, 2) + Math.pow(lineTwo, 2))
      )
      const cos = lineTwo / lineThree
      const radina = Math.acos(cos)
      const angle = 90 - Math.floor(180 / (Math.PI / radina))

      const lineBox = document.createElement('div')
      const lineImg = document.createElement('span')
      lineBox.className = 'lines'
      lineBox.id = e
      lineBox.style =
        'width:' +
        lineThree +
        'px;height:' +
        2 +
        'px;left:' +
        b +
        'px; top:' +
        d +
        'px;transform: rotate(' +
        angle +
        'deg) '
      lineImg.className = 'del el-icon-close'
      lineBox.appendChild(lineImg)

      this.$refs.lines.appendChild(lineBox)
    },
    descLine() {
      this.$nextTick(() => {
        for (var j = 0; j < this.$refs.right.children.length; j++) {
          if (this.$refs.right.children[j].innerText == this.dict.name) {
            var gprTop = this.$refs.right.children[j].getAttribute('top')
            var gprLeft = this.$refs.right.children[j].getAttribute('left')
            var gprId = this.$refs.right.children[j].getAttribute('gpr')

            var gplTop = this.$refs.left.children[0].getAttribute('top')
            var gplLeft = this.$refs.left.children[0].getAttribute('left')
            var gplId = this.$refs.left.children[0].getAttribute('gpl')

            this.appends(gprLeft, gplLeft, gprTop, gplTop, gplId, gprId)
          }
        }
        for (var j = 0; j < this.$refs.right.children.length; j++) {
          if (
            this.$refs.right.children[j].innerText == this.dict.enumPackage
          ) {
            var gprTop = this.$refs.right.children[j].getAttribute('top')
            var gprLeft = this.$refs.right.children[j].getAttribute('left')
            var gprId = this.$refs.right.children[j].getAttribute('gpr')

            var gplTop = this.$refs.left.children[1].getAttribute('top')
            var gplLeft = this.$refs.left.children[1].getAttribute('left')
            var gplId = this.$refs.left.children[1].getAttribute('gpl')

            this.appends(gprLeft, gplLeft, gprTop, gplTop, gplId, gprId)
          }
        }

        for (var j = 0; j < this.$refs.right.children.length; j++) {
          if (this.$refs.right.children[j].innerText == this.dict.enumViewer) {
            var gprTop = this.$refs.right.children[j].getAttribute('top')
            var gprLeft = this.$refs.right.children[j].getAttribute('left')
            var gprId = this.$refs.right.children[j].getAttribute('gpr')

            var gplTop = this.$refs.left.children[2].getAttribute('top')
            var gplLeft = this.$refs.left.children[2].getAttribute('left')
            var gplId = this.$refs.left.children[2].getAttribute('gpl')

            this.appends(gprLeft, gplLeft, gprTop, gplTop, gplId, gprId)
          }
        }
      })
    }
  }
}
</script>
<style>
#enum_desc #tit {
  width: 530px;
  height: 30px;
}
#enum_desc #tit div {
  width: 150px;
  height: 28px;
  line-height: 28px;
  float: left;
  border-bottom: 1px solid #ccc;
}
#enum_desc #tit div span {
  margin-left: 5px;
}
#enum_desc #mainBox {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#enum_desc #mainBox #boxTit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#enum_desc #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
}
#enum_desc #mainBox #boxTit .tit i {
  margin-right: 10px;
}
#enum_desc #mainBox .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#enum_desc #mainBox .btn .el-button {
  margin-right: 30px;
}

#enum_desc .next {
  background: #623f18;
  color: #fff;
}
#enum_desc .back {
  border-color: #623f18;
  color: #623f18;
}
#enum_desc #boxMain {
  margin: 20px;
  min-height: 500px;
}
#enum_desc .boxhead {
  width: 500px;
}
#enum_desc .boxhead .name {
  width: 200px;
}
#enum_desc .boxright {
  width: 500px;
  float: right;
}
#enum_desc .boxleft {
  width: 500px;
  float: left;
}
#enum_desc .box {
  width: 150px;
  height: 40px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  -webkit-user-select: none;
  padding-top: 12px;
  text-align: center;
}
#enum_desc .box p {
  margin-top: 10px;
  padding-left: 10px;
}
#enum_desc #canvas {
  position: absolute;
  left: 0;
  z-index: -1;
}
#enum_desc .lines {
  transform-origin: left top;
  border-radius: 5px;
  background: #0aa4dc;
  position: absolute;
}
#enum_desc .lines:hover {
  background-color: #d81e06;
  border-color: #8c8c8c;
  cursor: pointer;
}
#enum_desc .lines:hover .del {
  display: block;
}
#enum_desc .del {
  position: absolute;
  left: 45%;
  top: -8px;
  display: none;
  color: red;
  font-size: 20px;
}
</style>
